<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/conmn.css">
    <link rel="stylesheet" href="./css/magnifier.css">
    <link rel="stylesheet" href="./css/commodityDetails.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="typepage cr topb">
            <img src="./img/02-产品列表_02.jpg" alt="" style="height: 113px;">
            <p class="fl topp1">legochina.cn</p>
            <p class="topp fr">欢迎光临<a href="index.html">乐购</a>，请<a href="landingpPage.html">登陆</a>\<a href="from.html">注册</a></p>
            <ul>
                <li>图书、电子书、童书</li>
                <li>创意文具</li>
                <li>服饰、内衣</li>
                <li>鞋靴、箱包</li>
                <li>户外运动</li>
                <li>孕、婴、童</li>
                <li>家居、家纺、汽车</li>
                <li>家具、家装、康体</li>
                <li>美妆、个人护理、成人</li>
                <li>食品、茶酒、生鲜</li>
                <li>腕表、珠宝、眼镜</li>
                <li>手机、数码</li>
                <li>电脑办公</li>
                <li>家用电器</li>
            </ul>
        </div>
    </div>

    <form action="" class="typepage cr">
        <div class="fobox fr">
            <input type="text"><button class="fobtn"></button>
        </div>
        <div class="fort cr fr">
            <p class="fortlp fl"><a href= 'ShoppingCart.html' style="font-size: 14px; color: white;"><img src="./img/bgicon_04.jpg" style="margin-top: -4px;">购物车<span>3</span></a></p>
            <p class="fortrt fr">我的订单</p>
        </div>
    </form>

    <div class="toplb typepage cr">
        <div class="toplbbox fr">
            <span><a href="#">图书</a></span>
            <span><a href="#">电子书 </a></span>
            <span><a href="#">原创文学</a></span>
            <span><a href="#">服装</a></span>
            <span><a href="#">户外运动</a></span>
            <span><a href="#">孕婴童 </a></span>
            <span><a href="#">家居</a></span>
            <span><a href="#">创意文具</a></span>
            <span><a href="#">地方特产</a></span>
            <span><a href="#">海外购</a></span>
            <span><a href="#">电器城</a></span>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div class="hddb">
        <img src="./img/01-首页_07.jpg" alt="">
    </div>

    <!-- 图书购买 -->
    <div class="tsgm">
        <p class="typepage"><span>图书</span>》小说》情感/家庭/婚姻 》搏集天卷》他和她</p>
        <div class="typepage tsgmbt cr">
            <!-- 放大镜 -->
            <div class="fangdaj fl">
                <div class="magnifier" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="./img/22472496-1_l_2.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/23338636-1_l_5.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/22913031-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/23579654-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./img/21090357-1_l.jpg" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>

            </div>

            <div class="rtbox fr">
                <h3>他和她</h3>
                <p>《偷影子的人》作者马克·李伟重磅新作，法国连续60周在榜销量突破1200万册</p>
                <span>[法]马克·李维;杨亦雨 译</span>
                <div class="jg">
                    <p>乐购价：<span>￥26.20</span>&emsp;[6.9折] [定价：<span class="xhx">￥38.00</span>](降价通知)</p>

                    <p style="margin-top: 10px;">促销信息：<span class="mj">满减&emsp;每满150.00元，可减现金50元</span>&emsp;详情》》</p>

                    <p style="margin-top: 33px; font-size: 22px;">领劵：<img src="./img/03-产品详情-A_03.png" alt=""></p>

                    <p class="rtp">累计评价<span>99999</span></p>
                </div>
                <p class="zn">种类选择：<span><a href="" style="width: 104px; font-size: 16px; color: #666;">平装版</a></span>
                    <span><a href="" style="width: 104px; font-size: 16px; color: #666;">精装版</a></span></p>

                <div class="jrgw">
                    <form action="">
                        <input type="text" value="1">
                        <button class="ja" type="button">+</button>
                        <button class="jian" type="button">-</button>
                        <a href="">加入购物车</a>
                    </form>
                </div>

            </div>
        </div>
    </div>


    <!-- 人气单品 -->
    <div class="rq typepage">
        <div class="toprq">
            <p>人气单品</p>
        </div>
        <ul class="cr">
            <li>
                <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px;">
                <img src="./img/02-产品列表_07.png" alt="" class="baze">
                <p>白夜行&emsp;东野上吾</p>
                <img src="./img/02-产品列表_06.png" alt="" class="xin">
                <p class="jg">￥：38&emsp;<span>￥：58</span></p>
            </li>

            <li>
                <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px;">
                <img src="./img/02-产品列表_07.png" alt="" class="baze">
                <p>白夜行&emsp;东野上吾</p>
                <img src="./img/02-产品列表_06.png" alt="" class="xin">
                <p class="jg">￥：38&emsp;<span>￥：58</span></p>
            </li>

            <li>
                <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px;">
                <img src="./img/02-产品列表_07.png" alt="" class="baze">
                <p>白夜行&emsp;东野上吾</p>
                <img src="./img/02-产品列表_06.png" alt="" class="xin">
                <p class="jg">￥：38&emsp;<span>￥：58</span></p>
            </li>

            <li>
                <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px;">
                <img src="./img/02-产品列表_07.png" alt="" class="baze">
                <p>白夜行&emsp;东野上吾</p>
                <img src="./img/02-产品列表_06.png" alt="" class="xin">
                <p class="jg">￥：38&emsp;<span>￥：58</span></p>
            </li>

            <li>
                <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px;">
                <img src="./img/02-产品列表_07.png" alt="" class="baze">
                <p>白夜行&emsp;东野上吾</p>
                <img src="./img/02-产品列表_06.png" alt="" class="xin">
                <p class="jg">￥：38&emsp;<span>￥：58</span></p>
            </li>
        </ul>
    </div>


    <!-- 底部 -->
    <div class="bottom typepage cr">
        <div class="flbox fl">
            <p>看了又看</p>
            <ul>
                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>


                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li>
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>

                <li style="border-bottom: 0;">
                    <img src="./img/22935553-1_l.jpg" alt="" style="margin-top: 3px; ">
                    <img src="./img/02-产品列表_07.png" alt="" class="baze" style="margin-left: 58px; margin-bottom: 10px;">
                    <p>白夜行&emsp;东野上吾</p>
                    <img src="./img/02-产品列表_06.png" alt="" class="xin">
                    <p class="jg">￥：38&emsp;<span>￥：58</span></p>
                </li>
            </ul>
        </div>

        <div class="frbox fr">
            <p class="topp">
                <span>商品介绍</span>
                <span class="xuan">评价(9999)</span>
            </p>


            <div class='btbox'>
                <!-- 介绍 -->
                <div class="jes ">
                    <img src="./img/03-产品详情-q_03.jpg" alt="">
                </div>

                <!-- 评价 -->
                <div class="pj bx">
                    <div class="topimg">
                        <img src="./img/03-产品详情-b_03.jpg" alt="">
                        <p>全部评价(9999) 
                            <span>好评(888)</span>
                            <span>中评(888)</span>
                            <span>差评(0)</span>
                        </p>
                    </div>
                    <ul>
                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>


                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                        <li class="cr">
                            <img src="./img/03-产品详情-c_03.jpg" alt="" class="fl">
                            <p class="fl">书的质量不错，很新，一点放久的潮味或臭味都没有，内容值得一看，关键是价格真给力。</p>
                            <img src="./img/03-产品详情-c_06.jpg" alt="" class="fr">
                        </li>

                    </ul>
                    <div class="btan">
                        <p>
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                            <span class="dian" style="right: 135px; margin-left: 0; background: white;">.......</span>
                            <span>下一页</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部图片 -->
    <div class="tup typepage">
        <img src="./img/02-产品列表_08.jpg" alt="">
    </div>

    <!-- 线 -->
    <div class="xian">
    </div>


    <!-- 底部图标 -->
    <div class="bttb">
        <ul class="typepage cr">
            <li style="margin-left: 220px;">
                <img src="./img/222_11.png" alt="">
            </li>

            <li>
                <img src="./img/222_13(1).png" alt="">
            </li>

            <li>
                <img src="./img/222_15.png" alt="">
            </li>

            <li>
                <img src="./img/222_17.png" alt="">
            </li>
        </ul>
    </div>


    <!-- 底部 -->
    <div class="typepage bottom">
        <div class="bottop" >
            <ul style="margin-left: 178px;">
                <li><h3>购物指南</h3></li>
                <li>
                    <a href="">购物流程</a>
                </li>
                <li>
                    <a href="">发票制度</a>
                </li>
                <li>
                    <a href="">账户管理</a>
                </li>
                <li>
                    <a href="">会员优惠</a>
                </li>
            </ul>


            <ul>
                <li><h3>支付方式</h3></li>
                <li>
                    <a href="">货到付款</a>
                </li>
                <li>
                    <a href="">网上支付</a>
                </li>
                <li>
                    <a href="">礼品卡支付</a>
                </li>
                <li>
                    <a href="">银行转账</a>
                </li>
            </ul>


            <ul>
                <li><h3>订单配送</h3></li>
                <li>
                    <a href="">订单配送查询</a>
                </li>
                <li>
                    <a href="">订单状态说明</a>
                </li>
                <li>
                    <a href="">自动取消订单</a>
                </li>
                <li>
                    <a href="">自动支付取消</a>
                </li>
            </ul>


            <ul>
                <li><h3>退换货</h3></li>
                <li>
                    <a href="">退换货政策</a>
                </li>
                <li>
                    <a href="">自主申请退货</a>
                </li>
                <li>
                    <a href="">退货进度查询</a>
                </li>
                <li>
                    <a href="">退货的方式和时间</a>
                </li>
            </ul>
            

            <ul>
                <li><h3>商家服务</h3></li>
                <li>
                    <a href="">商家中心</a>
                </li>
                <li>
                    <a href="">运营服务</a>
                </li>
                <li>
                    <a href="">加入唯品会</a>
                </li>
            </ul>

            <ul>
                <li><img src="./img/logo_00.png" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- 底部图片 -->
    <div class="typepage">
        <img src="./img/01-首页_03.jpg" alt="">
    </div>












































    <script src="./js/轮播js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/comon.js"></script>
    <script src="./js/magnifier.js"></script>
    <script src="./js/commodityDetails.js"></script>
    <script type="text/javascript">
        $(function () {

            var magnifierConfig = {
                magnifier: "#magnifier1",//最外层的大容器
                width: 342,//承载容器宽
                height: 382,//承载容器高
                moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
                zoom: 5//缩放比例
            };

            var _magnifier = magnifier(magnifierConfig);

            /*magnifier的内置函数调用*/
            /*
                //设置magnifier函数的index属性
                _magnifier.setIndex(1);
        
                //重新载入主图,根据magnifier函数的index属性
                _magnifier.eqImg();
            */
        });
    </script>
</body>

</html>